<template>
  <div>
    <!-- 卡片 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in arr" :key="index">
        <div
          class="iconfont"
          :class="item.icon"
          :style="{ color: item.color }"
        ></div>
        <div class="lol-r">
          <h3>{{ item.tit }}</h3>
          <p>{{ item.price }}</p>
        </div>
      </el-col>
    </el-row>
    <!-- 图表 -->
    <!-- <el-card class="box-card" ref="tubiao"> </el-card> -->

    <Plan v-if="tubiaoInfo" class="info">
      <template #title>
        <div>首页图表</div>
      </template>

      <template>
        <div ref="demo" class="demo"></div>
      </template>
    </Plan>
  </div>
</template>

<script>
// import { indexStatementInfo } from '@/req/orderAjax'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      ech: ''
    }
  },
  props: {
    arr: {
      type: Array,
      default: () => []
    },
    tubiaoInfo: {
      type: Object,
      default: () => {}
    }
  },

  // 后来发现接口数据barData是异步获取的，而父子组件的加载顺序是：
  // 父_beforeCreate => 父_ created => 父_ beforeMount => 子_ beforeCreate => 子_created => 子_beforeMount => 子_mounted => 父_ mounted
  // 所以子组件获取到的是父组件data函数中的数据，初始绑定的数据，请求接口数据是在父组件的created函数中，根本获取不到接口数据

  // 父组件异步获取的数据传递个子组件,一般需要通过监听父组件传递过来的数据
  watch: {
    tubiaoInfo: {
      handler: function () {
        this.getInfo()
      },
      deep: true
    }
  },

  methods: {
    getInfo () {
      // const data = await indexStatementInfo()
      const data = this.tubiaoInfo

      this.$nextTick(() => {
        var myChart = echarts.init(this.$refs.demo)
        const option = {
          title: {
            text: '订单信息'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.xData
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: ['订单数据', '金额数据']
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
          },
          series: [
            {
              name: '订单数据',
              data: data.orderData,
              type: 'line'
            },
            {
              name: '金额数据',
              data: data.amountData,
              type: 'line'
            }
          ]
        }
        myChart.setOption(option)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.demo {
  height: 300px;
}
.box-card {
  height: 400px;
}
.el-row {
  display: flex;
  justify-content: space-around;
}
.el-col {
  margin: 0 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
  background-color: rgb(53, 180, 108);

  align-items: center;
  padding: 20px 10px;
  border-radius: 10px;

  .iconfont {
    font-size: 45px;
  }
  .lol-r {
    margin-top: 5px;
    h3 {
      text-align: center;
      font-size: 18px;
      color: rgb(255, 255, 255);
    }
    p {
      margin-top: 5px;
      font-size: 18px;
    }
  }
}
.info {
  margin: 50px auto;
  width: 60%;
}
</style>
